<!-- Copyright 2020 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">

<link rel="import" href="../behaviors/oobe_focus_behavior.html">
<link rel="import" href="../common_styles/common_styles.html">
<link rel="import" href="../common_styles/oobe_dialog_host_styles.html">
<link rel="import" href="../oobe_vars/oobe_custom_vars_css.html">
<link rel="import" href="../oobe_vars/oobe_shared_vars_css.html">

<!--
  Simple OOBE dialog which should be used for OOBE UI elements.
  It has correct size and padding. It can display top left icon, and has
  several parts: header, subheader, progress bar; content area; and buttons
  containers at the top for back navigation and for other buttons at the bottom.

  When shown (i.e. when outside container calls .show()):
    1. If this dialog has tags in class "focus-on-show", the first one will be
  focused.
    2. 'show-dialog' is fired.

  Please include oobe-dialog-host-styles shared style if you use oobe-adaptive-dialog.

  Example:
    <style include="oobe-dialog-host-styles"></style>
    <oobe-adaptive-dialog on-show-dialog="onTestDialogShown_" has-buttons>
      <iron-icon ... slot="icon">
      <h1 slot="title">Title</h1>
      <div slot="subtitle">Subtitle</div>
      <div slot="content">
        <div class="focus-on-show">...</div>
        ...
      </div>
      <div slot="back-navigation">
        ...
      </div>
      <div slot="bottom-buttons">
        ...
      </div>
    </oobe-adaptive-dialog>

  Add slot |header| to all which you want to go inside the header.  Similar
  with slots |content|, |bottom-buttons|.

  For single-DPI image |oobe-icon| class should be used. To select between two
  images of different DPI, |oobe-icon-1x| and |oobe-icon-2x| should be used
  instead. For example:

      <iron-icon icon="icon1" ... slot="icon" class="oobe-icon-1x">
      <iron-icon icon-"icon2" ... slot="icon" class="oobe-icon-2x">

  Attributes:
    no-lazy           - prevents lazy instantiation of the dialog.
-->
<dom-module id="oobe-adaptive-dialog">
  <template>
    <style include="oobe-dialog-host-styles cr-shared-style">
      /* Please check whether |multidevice_setup/ui_page.html| needs to be */
      /* updated when below css rules are changed. */
      :host {
        height: var(--oobe-adaptive-dialog-height);
        width: var(--oobe-adaptive-dialog-width);
        @apply --oobe-default-font;
      }

      :host-context([orientation=horizontal]) {
        --oobe-adaptive-dialog-content-direction: row;
        --oobe-adaptive-dialog-item-alignment: unset;
        --oobe-text-alignment: start;
        --oobe-adaptive-dialog-content-width: calc(
            var(--oobe-adaptive-dialog-width) -
            4 * var(--oobe-adaptive-dialog-content-padding) -
            var(--oobe-adaptive-dialog-header-width));
        /* Header takes 40% of the width remaining after applying padding */
        --oobe-adaptive-dialog-header-width: clamp(302px,
            calc(0.4 * (var(--oobe-adaptive-dialog-width) -
            4 * var(--oobe-adaptive-dialog-content-padding))) , 346px);
        --oobe-adaptive-dialog-content-top-padding: 0;
      }

      :host-context([orientation=vertical]) {
        --oobe-adaptive-dialog-content-direction: column;
        --oobe-adaptive-dialog-item-alignment: center;
        --oobe-text-alignment: center;
        --oobe-adaptive-dialog-content-width: calc(
            var(--oobe-adaptive-dialog-width) -
            2 * var(--oobe-adaptive-dialog-content-padding));
        /* Header takes 60% of the width remaining after applying padding */
        --oobe-adaptive-dialog-header-width: clamp(346px,
            calc(0.6 * (var(--oobe-adaptive-dialog-width) -
            2 * var(--oobe-adaptive-dialog-content-padding))) , 520px);
      }

      #oobe-title ::slotted(h1) {
        color: var(--oobe-header-text-color);
        @apply --oobe-header-font;
        margin: 0;
        text-align: var(--oobe-text-alignment);
      }

      #oobe-subtitle ::slotted(*) {
        color: var(--oobe-subheader-text-color);
        @apply --oobe-subheader-font;
        margin: 0;
        overflow-wrap: break-word;
        text-align: var(--oobe-text-alignment);
      }

      #main-container {
        align-items: var(--oobe-adaptive-dialog-item-alignment);
        flex-direction: var(--oobe-adaptive-dialog-content-direction);
      }

      #header-container {
        padding-bottom: 0;
        padding-inline-end: var(--oobe-adaptive-dialog-content-padding);
        padding-inline-start: var(--oobe-adaptive-dialog-content-padding);
        padding-top: var(--oobe-adaptive-dialog-header-top-padding);
        width: var(--oobe-adaptive-dialog-header-width);
      }

      #scrollContainer {
        border: transparent;
        margin-top: var(--oobe-adaptive-dialog-content-top-padding);
        overflow-y: auto;
        padding-bottom: 0;
        padding-inline-end: var(--oobe-adaptive-dialog-content-padding);
        padding-inline-start: var(--oobe-adaptive-dialog-content-padding);
        padding-top: 0;
      }

      #oobe-title {
        padding-top: var(--oobe-adaptive-dialog-title-top-padding);
      }

      #oobe-progress ::slotted(paper-progress) {
        --paper-progress-active-color: var(--google-blue-500);
        --paper-progress-container-color: var(--google-blue-100);
        height: 4px;
        margin-top: 32px;
        width: 100%;
      }

      #oobe-subtitle {
        padding-top: 16px;
      }

      #contentContainer {
        width: var(--oobe-adaptive-dialog-content-width);
      }
      #contentContainer ::slotted(*) {
        max-width: var(--oobe-adaptive-dialog-content-width);
      }

      .vertical-mode-centering {
        align-items: var(--oobe-adaptive-dialog-item-alignment);
        display: flex;
        flex-direction: column;
      }

      .bottom-buttons-container {
        /* Always allocate height for buttons even a container is empty */
        min-height: var(--oobe-button-height);
        padding-bottom: var(--oobe-adaptive-dialog-buttons-vertical-padding);
        padding-inline-end:
          var(--oobe-adaptive-dialog-buttons-horizontal-padding);
        padding-inline-start:
          var(--oobe-adaptive-dialog-buttons-horizontal-padding);
        padding-top: var(--oobe-adaptive-dialog-buttons-vertical-padding);
        z-index: 1;
      }

      .back-button-container {
        /* Always allocate height for buttons even a container is empty */
        min-height: var(--oobe-button-height);
        padding-bottom:
          var(--oobe-adaptive-dialog-back-button-vertical-padding);
        padding-inline-end:
          var(--oobe-adaptive-dialog-back-button-horizontal-padding);
        padding-inline-start:
          var(--oobe-adaptive-dialog-back-button-horizontal-padding);
        padding-top: var(--oobe-adaptive-dialog-back-button-vertical-padding);
        z-index: 1;
      }

      #oobe-icon-div ::slotted(hd-iron-icon),
      #oobe-icon-div ::slotted(iron-icon) {
        --iron-icon-height: var(--oobe-adaptive-dialog-icon-size);
        --iron-icon-width: var(--oobe-adaptive-dialog-icon-size);
        --iron-icon-fill-color: var(--google-blue-600);
      }
    </style>
    <cr-lazy-render id="lazy">
      <template>
        <div class="back-button-container">
          <slot name="back-navigation"></slot>
        </div>
        <div id="main-container" class="layout vertical flex">
          <div id="header-container">
            <div id="oobe-icon-div" class="vertical-mode-centering">
              <slot name="icon"></slot>
            </div>
            <div id="oobe-title" class="vertical-mode-centering">
              <slot name="title"></slot>
            </div>
            <div id="oobe-progress" class="vertical-mode-centering">
              <slot name="progress"></slot>
            </div>
            <div id="oobe-subtitle" class="vertical-mode-centering">
              <slot name="subtitle"></slot>
            </div>
          </div>
          <div id="scrollContainer" class="layout vertical flex scrollable"
              on-scroll="applyScrollClassTags_">
            <div id="contentContainer" class="layout vertical flex">
              <slot name="content"></slot>
            </div>
          </div>
        </div>
        <div class="bottom-buttons-container vertical-mode-centering">
          <slot class="layout horizontal end-justified" name="bottom-buttons">
          </slot>
        </div>
      </template>
    </cr-lazy-render>
  </template>
  <script src="oobe_adaptive_dialog.js"></script>
</dom-module>
